<template>
	<view class="app column">
		<!-- 顶部栏 -->
		<page-header></page-header>
		
		<view class="content row">
			<scroll-view class="left-side" scroll-y>
				<view class="item center" v-if="list.length>0" :class="{active: item.id === currentType}" v-for="item in list" :key="item.id" @click="changeCate(item)">
					<text>{{ item.attributeName }}</text>
				</view>
			</scroll-view>
			
				<scroll-view class="right-side" scroll-y>
					<mescroll-body
						ref="mescrollRef" 
						@init="mescrollInit" 
						:top="80" 
						@down="downCallback" 
						:up="upOption" 
						@up="loadList" 
					>
					<view class="cate-text">
						<view class="item "  v-if="current.length>0" v-for="item in current" :key="item.id" >
							<view class="icon-txt" v-if="item.attributeId===currentType" @click="navToList(item.id)">
								<view class="icon-image" v-if="item.courseImg">
									<image class="icon" :src="'https://maxh-1305457127.cos.ap-guangzhou.myqcloud.com/'+item.courseImg" mode="aspectFill"></image>
								</view>
								<view class="tit">
									<view class="title">{{ item.courseName }}</view>
									<view class="teacher">
										<span class="teacherName">{{ item.username }}</span>
										<span class="teacherName">{{ item.degree }}</span>
									</view>
									<view>
										<span class="maney">{{ item.price }}</span>
										<span class="type">{{ item.courseType }}</span>
									</view>
								</view>
							</view>
						</view>
						<view v-if="currentList" class="image-bg ">
							<view class="center">
								<image src="../../static/icon/default-avatar.png" class="img-png"></image>
							</view>
							<view class="img-text">空空如也</view>
						</view>
					</view>
					</mescroll-body>
				</scroll-view>
			
		</view>
		
	</view>
</template>

<script>
	import tabbarMixin from './mixin/tabbar' 
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import pageHeader from './components/page-header.vue'
	import{getCategoryList} from '@/common/js/api.js'
	export default {
		components: {
			pageHeader
		},
		mixins: [tabbarMixin,MescrollMixin], 
		data() {
			return {
				list: [],
				current:[],
				currentType:8,
				data:[],
				currentList:true
			}
		},
		computed: {
			categoryList(){
				return this.$store.state.categoryList;
			}
		},
		watch: {
			categoryList(){
				this.list = this.categoryList;
			}
		},
		onLoad() {
			// this.loadData();
			this.data = this.categoryList
			this.current = this.data.courseList;
			this.list = this.data.attributeList;
			if(this.data.attributeList.length>0){
				this.currentType = this.data.attributeList[0].id;
				this.current.forEach((item1,index)=> {
					if(item1.id === this.currentType) this.currentList = false
				});
			}
		},
		methods: {
			async loadList(e){
				this.loadType = e.num === 1 ? 'refresh' : 'add';
				await this.$store.dispatch('getCategory');
				this.data = this.categoryList
				this.current = this.data.courseList;
				this.list = this.data.attributeList;
				// if(this.data.attributeList.length>0){
				// 	this.currentType = this.data.attributeList[0].id;
				// }
				
				this.listLoading = true
				this.mescroll.endSuccess(); //结束加载状态
				this.isLoading=false;
			},
			mescrollInit(mescroll){
				this.isLoading = true;
				this.mescroll = mescroll;
				this.mescroll.resetUpScroll(false)
			},
			changeCate(item){
				// console.log(item.id);
				this.currentType = item.id;
				this.currentList = true
				this.current.forEach((item1,index)=> {
					if(item1.id === this.currentType) this.currentList = false
				});
			},
			navToList(id){
				this.navTo('/pages/product/detail?id='+id)
			}
		}
	}
</script>

<style>
	page{
		height: 100%;
	}
</style>
<style scoped lang="scss">
	.app{
		height: 100%;
	}
	.content{
		flex: 1;
		padding-top: 12rpx;
		overflow: hidden;
	}
	.left-side{
		flex-shrink: 0;
		width: 180rpx;
		height: 100%;
		overflow-y: hidden;
		background-color: #f2f2f2;
		
		.item{
			height: 90rpx;
			font-size: 26rpx;
			color: #555;
		}
		.active{
			font-size: 28rpx;
			color: $base-color;
			font-weight: 700;
			background-color: #fff;
			position: relative;
			
			&::before{
				content: '';
				position: absolute;
				left: 0;
				top: 30rpx;
				width: 6rpx;
				height: 30rpx;
				background-color: $base-color;
				border-radius: 0 4rpx 4rpx 0;
			}
		}
	}
	.right-side{
		flex: 1;
		height: calc(100% +80rpx);
		
		.cate-image{
			width: calc(100% - 40rpx);
			height: 200rpx;
			margin: 0 20rpx;
			border-radius: 8rpx;
		}
		.wrap{
			display: flex;
			flex-wrap: wrap;
			padding: 0 20rpx 20rpx;
		}

		.cate-text{
			width: calc(100% - 40rpx);
			margin: 0 20rpx;
			border-radius: 8rpx;
		}
		.icon-txt{
			width: calc(100% - 20rpx);
			height:180rpx;
			margin: 10rpx;
			padding: 10rpx 0rpx;
			border-radius: 8rpx;
			// background-color: #07C160;
		}
		.icon{
			width: 120rpx;
			height: 180rpx;
			line-height: 148rpx;
			margin-right: 20rpx;
			border-radius: 8rpx;
		}
		.icon-image{
			float: left;
			// background-color: #0081FF;
			border-radius: 8rpx;
		}
		.tit{
			
		}
		.title{
			font-size: 28rpx;
			color: #000;
		}
		.type{
			font-size: 20rpx;
			color:#969696;
			float: right;
		}
		.maney{
			font-size: 28rpx;
			color:#E1251B;
		}
		.teacher{
			margin-bottom: 1rpx;
		}
		.teacherName{
			background-color: #e5e5e5;
			color: #969696;
			margin-right:15rpx;
			font-size: 16rpx;
		}
	}
	.image-bg{
	
		text-align: center;
		border-radius: 6rpx;
		.img-text{
			font-size: 16rpx;
			color: #82939C;
		}
	}
	.img-png{
		text-align: center;
		width: 160rpx;
		height: 160rpx;
	}
</style>
